<template>
  <el-form 
    :model="searchForm" 
    :inline="props.inline" 
    class="search-form" 
    :label-width="props.labelWidth"
  >
    <template v-for="(item, index) in props.fields" :key="index">
      <el-form-item :label="item.label" :prop="item.prop">
        <!-- 输入框 -->
        <el-input
          v-if="item.type === 'input' || !item.type"
          v-model="searchForm[item.prop]"
          :placeholder="item.placeholder || `请输入${item.label}`"
          :clearable="item.clearable !== false"
        />
        
        <!-- 选择器 -->
        <el-select
          v-else-if="item.type === 'select'"
          v-model="searchForm[item.prop]"
          :placeholder="item.placeholder || `请选择${item.label}`"
          :clearable="item.clearable !== false"
        >
          <el-option
            v-for="option in item.options"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
        
        <!-- 日期选择器 -->
        <el-date-picker
          v-else-if="item.type === 'date'"
          v-model="searchForm[item.prop]"
          :type="item.dateType || 'date'"
          :placeholder="item.placeholder || `请选择${item.label}`"
          :value-format="item.valueFormat || 'yyyy-MM-dd'"
        />
      </el-form-item>
    </template>

    <el-form-item>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button @click="resetSearch" v-if="props.showReset">重置</el-button>
      <slot name="extra-buttons"></slot>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

interface FieldOption {
  value: string | number
  label: string
}

interface FormField {
  type?: 'input' | 'select' | 'date'
  label: string
  prop: string
  placeholder?: string
  clearable?: boolean
  options?: FieldOption[]
  dateType?: string
  valueFormat?: string
}

const props = defineProps({
  // 字段配置
  fields: {
    type: Array as () => FormField[],
    required: true,
    default: () => []
  },
  // 是否行内布局
  inline: {
    type: Boolean,
    default: true
  },
  // 是否显示重置按钮
  showReset: {
    type: Boolean,
    default: true
  },
  // 标签宽度
  labelWidth: {
    type: String,
    default: ''
  },
  // 初始表单值
  initialForm: {
    type: Object as () => Record<string, any>,
    default: () => ({})
  }
})

const emit = defineEmits<{
  (e: 'search', formData: Record<string, any>): void
  (e: 'reset', formData: Record<string, any>): void
}>()

const searchForm = ref<Record<string, any>>({})

// 初始化表单
const initForm = () => {
  const form: Record<string, any> = {}
  props.fields.forEach(item => {
    form[item.prop] = props.initialForm[item.prop] || ''
  })
  searchForm.value = form
}

// 搜索事件
const handleSearch = () => {
  emit('search', searchForm.value)
}

// 重置表单
const resetSearch = () => {
  initForm()
  emit('reset', searchForm.value)
}

// 初始化表单
initForm()

// 监听fields变化
watch(() => props.fields, () => {
  initForm()
}, { deep: true })
</script>

<style scoped>
.search-form {
  margin-bottom: 20px;
}
</style>